import React, { useRef, useState } from 'react';
import style from './index.module.scss';
import { Scrollbars } from 'react-custom-scrollbars';
import { useSize } from 'ahooks';

const Page1 = () => {
    const [show, setShow] = useState(true);
    const box = useRef(null);
    const size = useSize(box); // 当大小变化时候，没有触发render 那么滚动条就不会变化，可以使用useSize

    return <>
        <button onClick={() => setShow(!show)}>变化</button>
        <div className={style.box}>
            <Scrollbars>
                <div ref={box}>
                    <div className={style.section}>31231</div>
                    {
                        show ? <>
                            <div className={style.section2}>31231</div>
                            <div className={style.section3}>31231</div>
                            <div className={style.section}>31231</div>
                            <div className={style.section2}>31231</div>
                            <div className={style.section}>31231</div>
                            <div className={style.section2}>31231</div>
                        </> : null
                    }
                </div>
            </Scrollbars>
        </div>
    </>;
};

export default Page1;
